<template>
  <div class="user_love">
    <div class="head">
      <div class="cover">
        <el-image
          style="width: 45px; height: 45px"
          :src="userinfo.avatarUrl"
          fit="cover"
        ></el-image>
      </div>
      <div class="user_name">{{ userinfo.nickname }}喜欢的音乐</div>
    </div>
    <div class="song_list">
      <div
        @dblclick="startSong(item)"
        :class="{ active_position: item.id === songId }"
        v-for="(item, index) in songList"
        :key="index"
        class="item"
      >
        <div class="num">{{ index + 1 }}</div>
        <div class="name">{{ item.name }}</div>
        <div class="album">
          <span @click="toSingerDetail(item.ar[0].id)">{{
            item.ar[0].name
          }}</span>
        </div>

        <div @click="getMusicLike(item.id, false, index)" class="btn">
          <i class="iconfont icon-aixin"></i>
          <el-button
            @click="toDetail(item.mv)"
            size="mini"
            v-if="item.mv != 0"
            type="primary"
            >mv</el-button
          >
        </div>
        <div class="timer">{{ item.dt | timerFormat }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserLikeList, getMusicLike } from "@/util/music.js";
import { getMusicDetailList, getUserInfo } from "@/util/userinfo.js";
import { mapGetters } from "vuex";

export default {
  name: "Userlove",

  data() {
    return {
      userId: this.$route.params.id,
      ids: "",
      songList: [],
      userinfo: {},
    };
  },
  computed: {
    ...mapGetters("musicPlay", [
      //当前播放歌曲id
      "songId",
      //是否在播放
      "isPlaying",
      "hasPlayList",
    ]),
  },
  created() {
    this.getUserLikeList();
    this.getUserInfo();
  },

  methods: {
    //获取用户详情
    async getUserInfo() {
      let { data } = await getUserInfo(this.userId);
      //   console.log(data);
      this.userinfo = data.profile;
    },
    //获取喜欢音乐列表id
    async getUserLikeList() {
      let { data } = await getUserLikeList(this.userId);
      //   console.log(data);
      this.ids = data.ids.join(",");
      this.getMusicDetailList(data.ids.join(","));
    },
    //获取音乐列表
    async getMusicDetailList(ids) {
      let { data } = await getMusicDetailList(this.ids);
      // console.log(data);
      this.songList = data.songs;
    },
    //喜欢/取消喜欢音乐
    async getMusicLike(id, type, index) {
      let { data } = await getMusicLike(id, type);
      if (data.code == 200) {
        this.$message.success("取消喜欢成功");
        this.songList.splice(index, 1);
      }
      // console.log(data);
    },
    //播放歌曲
    async startSong(musicDetail) {
      //保存当前播放列表
      this.$store.dispatch("musicPlay/savePlayList", this.songList);

      sessionStorage.setItem("playList", JSON.stringify(this.songList));

      //保存播放状态
      this.$store.dispatch("musicPlay/saveIsPlaying", "true");

      //保存当前歌曲id
      this.$store.dispatch("musicPlay/saveSongId", musicDetail.id);
      sessionStorage.setItem("songId", musicDetail.id);
    },
    //跳转到歌手详情
    toSingerDetail(id) {
      this.$router.push("/singerInfo/" + id);
    },
    //去视频界面
    toDetail(id) {
      this.$store.dispatch("musicPlay/saveIsPlaying", "false");

      this.$router.push("/mvDetail/" + id);
    },
  },
};
</script>

<style lang="less" scoped>
.user_love {
  padding: 1rem 8.5rem;
  .head {
    display: flex;
    align-items: center;
    .cover {
      .el-image {
        border-radius: 50%;
      }
    }
    .user_name {
      margin-left: 20px;
      font-size: 40px;
      font-weight: 600;
    }
  }
  .song_list {
    margin-top: 20px;
    .item {
      height: 50px;
      display: flex;
      align-items: center;
      border-radius: 8px;
      &:hover {
        background-color: #f2f2f4;
      }
      .num {
        width: 50px;
        text-align: center;
        font-size: 16px;
        //   font-weight: 600;
      }
      .name {
        width: 40%;
        font-size: 18px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .album {
        flex: 1;
        font-size: 15px;
        font-weight: 600;
      }
      .btn {
        font-size: 15px;
        font-weight: 600;
        width: 10%;
        color: #335eea;
        &:hover .el-button {
          transform: scale(1.1);
        }
        .el-button {
          margin-left: 6px;
          background-color: #fff;
          color: rgb(16, 24, 134);
          font-weight: 600;
          border: none;
          border-radius: 5px;
        }
        i {
          &:hover {
            transform: scale(1.1);
          }
        }
      }
      .timer {
        width: 50px;
        text-align: center;
        font-size: 18px;
        color: rgb(167, 157, 157);
      }
    }
    .active_position {
      color: #335eea;
      background: #eaeffd;

      .num {
        color: #335eea;
      }
      .album,
      .name,
      .timer {
        color: #335eea;
      }
    }
  }
}
</style>